<html>

 <script>
	$(function () 
		{
			//$('#datepicker1').datepicker({ dateFormat: 'dd/mm/yy' });
			$('.sel').select2();	  		  
		});
 </script> 
<style>
table {
  border-collapse: collapse;
  border-spacing: none;
  }

thead th {
  background-color: #F7BE81;
  font-size: 12px;
  font-family: sans-serif;
  border:none;  
  }

tbody td {
  font-size: 12px;   
}

tr td:first-child,
tr th:first-child {
      border-top-left-radius: 6px;
      border-bottom-left-radius: 6px;
}

tr td:last-child,
tr th:last-child {
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}

</style>

	<div ng-app="myApp" >
		<h3>Average billing Report</h3> 
		<br/>
			Year:
			<select ng-model="search1" class="sel" style="width:100px,text-align: left;" data-placeholder="{{search1}}">
				<option></option>
				<option ng-repeat="x in yr_arr">{{x}}</option>									
			</select>  &nbsp;&nbsp;
			Month: 
			<select ng-model="search2" class="sel" style="width:120px,text-align: left;" data-placeholder="{{search2}}">
				<option></option>
				<option value='1'>January</option>				
				<option value='2'>February</option>								
				<option value='3'>March</option>								
				<option value='4'>April</option>								
				<option value='5'>May</option>								
				<option value='6'>June</option>								
				<option value='7'>July</option>								
				<option value='8'>August</option>								
				<option value='9'>September</option>								
				<option value='10'>October</option>								
				<option value='11'>November</option>								
				<option value='12'>December</option>								
			</select>			
		<br><br>
		
		<input type="text" ng-model="search" class="search-query" placeholder="Search">     
		<a class="btn" href="#/cancel/" ng-click="cancel()" >Clear Selection</a><br/><br>
		<table class="table table-striped table-condensed table-hover">
			<thead>
			<tr>
				<th>Rate per month</th>			
				<th>Count (Customers)</th>			
				<th>Total Amount</th>										
			</tr>
			</thead>
			<tbody>
				<tr ng-repeat="item in mismast| filter: search| startingFrom:currentPage*pageSize | limitTo:pageSize">
					<td>{{item.rpm}}</td>
					<td>{{item.custcnt}}</td>									
					<td>{{item.totalamt}}</td>
				</tr>
				<tr>
					<td></td>
					<td><br/><b>TOTAL AMOUNT</b></td>
					<td><br/><b>{{cal_grandtot()}}</b></td>
				</tr>
			</tbody>
		</table>
		
		<tfoot>
			Current Page  {{currentPage+1}} of {{Math.ceil(mismast.length/pageSize)}}
				<td colspan="6">
					<div class="pagination pull-right">
						<ul>                             
							<button class="btn btn-info" ng-disabled="currentPage == 0" ng-click="currentPage=currentPage-1"> << Prev </button>                                
							<li ng-repeat="n in range(mismast.length)"
								ng-class="{active: n == currentPage}"
								ng-click="setPage()">
								<a href ng-bind="n + 1">1</a>
							</li>                     
							<button class="btn btn-info" ng-disabled="currentPage >= mismast.length/pageSize - 1" ng-click="currentPage=currentPage+1">  Next >>   </button>       
						</ul>
					</div>
				</td>
		</tfoot>   
    </div>  
	  
</body>
</html>

